<template>
  <div>
    <h4>我加入的空间</h4>
    <template v-if="signed">
      <template v-if="spaces.length">
        <div v-for="space in spaces" :key="space.id" class="mini-space-card">
          <div class="flex align-items-center">
            <space-avatar :space="space" />
            <div class="m-l-10">
              <router-link class="title link" :to="`/${$rp.SPACES}/${space.id}`">
                {{ space.title }}
              </router-link>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        当前社区没有关联我加入的空间
      </template>
    </template>
    <template v-else>
      <el-button size="mini" type="primary" @click="goSignIn">登录</el-button>
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import SpaceAvatar from '@/components/space-avatar';
import { formatSpacesList } from '@/components/spaces/format';

export default {
  name: 'JoinedSpaces', // 我加入的空间
  components: { SpaceAvatar },
  data() {
    return {
      spaces: [], // 我加入的空间
    };
  },
  computed: {
    ...mapState(['currentUser']),
    signed() { return Object.keys(this.currentUser).length; },
  },
  created() {
    if (this.signed) this.loadRelatedSpaces();
  },
  methods: {
    // 获取当前社区我加入的空间
    loadRelatedSpaces() {
      this.$api.communities.spaces({
        communityId: this.$route.params.communityId,
        type: 'current_user',
      }).then((res) => { this.spaces = formatSpacesList(res.data); })
        .catch(() => {});
    },
  },
};
</script>

<style></style>
